<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>11jQuery对象访问</title>
    <script src="../03jquery/js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            // jQuery 对象访问
            // each(callback)
            // length
            // selector
            // context
            // get([index])
            // index([selector|element])

            let $li = $("li");

            console.log($li.length);       // 3
            console.log($li.get(0));       // <li id="foo">foo</li>
            console.log($li[0]);           // <li id="foo">foo</li>

            // 四种遍历
            // for (let i = 0; i < $li.length; i++) {
            //     console.log($li[i]);
            // }
            // for (const $liElement of $li) {  // 别用for in
            //     console.log($liElement);
            // }
            // $li.each(function () {
            //     console.log(this);
            // })
            // $.each($li, function () {
            //     // console.log(this);
            // })


            // 查找位置
            console.log($('li').index(document.getElementById('bar')));
            ; //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
            console.log($('li').index($('#bar')));
            ;         //1，传递一个jQuery对象
            console.log($('li').index($('li:gt(0)')));
            ;     //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
            console.log($('#bar').index('li'));             //1，传递一个选择器，返回#bar在所有li中的做引位置
            console.log($('#bar').index());                 //1，不传递参数，返回这个元素在同辈中的索引位置。


            console.log($li.selector);     // undefined
            console.log($li.content);      // undefined


        });
    </script>
</head>
<body>

<ul>
    <li id="foo">foo</li>
    <li id="bar">bar</li>
    <li id="baz">baz</li>
</ul>

</body>
</html>